<script setup lang="ts">
import { onMounted, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n'
const params = new URLSearchParams(window.location.search);
const data = {
    name: params.get("name") || "",
    version: params.get("version") || "",
    mode: params.get("mode") || "",
    fullscreen: params.get("fullscreen") == "true",
    dev: params.get("dev") == "true",
}
const { t, mergeLocaleMessage, locale } = useI18n()

const loading = ref(0)
const global: any = ref({ rule: [], api: {}, options: {} })
const setTheme = ref()
const colorMode = ref("light")
const onLoaded = (module?: any) => {
    if (!module) {
        return
    }
    setTheme.value = module.setTheme || ((_: any) => { });
    const language: any = module.language || {}
    for (const key in language) {
        let lang: any = {}
        lang[data.name] = { form: language[key] }
        mergeLocaleMessage(key, lang)
    }
    let server: any = () => { }
    if (data.mode === "server") {
        server = async (options: any) => {
            return await window.ipcRenderer.invoke("server", {
                name: data.name,
                version: data.version,
                options: options
            })
        }
    }
    global.value = module.global({
        $t: (str: string) => {
            return t(`${data.name}.form.${str}`)
        },
        locale: locale.value,
        isDark: colorMode.value,
        data: data,
        providerUrl: `atom://${data.name}/${data.version}`,
        server: server,
    });
    loading.value = module.loading ? 2 : 1;
    if (module.loading) {
        loading.value = 2;
    } else {
        loading.value = 1;
        setTimeout(() => {
            updateScreen()
        }, 300)
    }
}
const updateScreen = () => {
    if (data.fullscreen) {
        return
    }
    let height: any = document.querySelector(".arco-form")?.clientHeight;
    if (height < 100) {
        return
    }
    height = height + 55;
    if (height == window.innerHeight) {
        return
    }
    window.ipcRenderer?.send('setStore', `projects.${data.name}.screen.height`, height);
    window.ipcRenderer?.send('updateHeight', height);
}
onMounted(() => {
    if (data.dev) {
        import(`../../../@toy-kit/${data.name}/src/main.js`).then((modules: any) => {
            onLoaded(modules.default);
        })
    } else {
        const script = document.createElement('script');
        script.src = `atom://${data.name}/${data.version}/dist/index.iife.js`;
        script.onload = () => {
            onLoaded((window as any).tk[data.name]);
        };
        document.body.appendChild(script);
    }
})
const onLoad = () => {
    loading.value = 1;
    updateScreen()
}
watch(() => colorMode.value, () => {
    (setTheme.value || ((_: any) => { }))(colorMode.value)
})
</script>
<template>
    <a-spin :loading="loading !== 1" class="w-full h-full" :class="data.fullscreen ? '' : 'p-4'">
        <a-scrollbar class="overflow-y-auto w-full content-h">
            <form-create v-if="loading" :rule="global.rule" v-model:api="global.api" :option="global.options"
                @load="onLoad" />
        </a-scrollbar>
    </a-spin>
</template>